class NotepadMenu extends HTMLElement {
    constructor(){
      super();
      this.template = document.createElement("template");
      this.template.innerHTML = this.#html;
      this.appendChild(this.template.content);

      this.querySelector(".table1").onclick =(a)=> {
        this.querySelector(".table2").children[0].style.display = "none";
        this.querySelector(".table3").children[0].style.display = "none";
        this.querySelector(".table4").children[0].style.display = "none";
        this.querySelector(".table5").children[0].style.display = "none";

        this.querySelector(".table1").children[0].style.display = "block";
        a.stopPropagation();
      };
      this.querySelector(".table2").onclick =(a)=> {
        this.querySelector(".table1").children[0].style.display = "none";
        this.querySelector(".table3").children[0].style.display = "none";
        this.querySelector(".table4").children[0].style.display = "none";
        this.querySelector(".table5").children[0].style.display = "none";

        this.querySelector(".table2").children[0].style.display = "block";
        a.stopPropagation();
      };
      this.querySelector(".table3").onclick =(a)=> {
        this.querySelector(".table2").children[0].style.display = "none";
        this.querySelector(".table1").children[0].style.display = "none";
        this.querySelector(".table4").children[0].style.display = "none";
        this.querySelector(".table5").children[0].style.display = "none";

        this.querySelector(".table3").children[0].style.display = "block";
        a.stopPropagation();
      };
      this.querySelector(".table4").onclick =(a)=> {
        this.querySelector(".table2").children[0].style.display = "none";
        this.querySelector(".table3").children[0].style.display = "none";
        this.querySelector(".table1").children[0].style.display = "none";
        this.querySelector(".table5").children[0].style.display = "none";

        this.querySelector(".table4").children[0].style.display = "block";
        a.stopPropagation();
      };
      this.querySelector(".table5").onclick =(a)=> {
        this.querySelector(".table2").children[0].style.display = "none";
        this.querySelector(".table3").children[0].style.display = "none";
        this.querySelector(".table4").children[0].style.display = "none";
        this.querySelector(".table1").children[0].style.display = "none";

        this.querySelector(".table5").children[0].style.display = "block";
        a.stopPropagation();
      };

      this.querySelector(".notepad-help").onclick =(a)=>{
        this.getRootNode().querySelector(".notepadhelp").style.display ="block";
        this.querySelector(".bar1").style.display ="none";
        a.stopPropagation();
      };

      this.querySelector(".notepad-replace").onclick =(a)=>{
        this.getRootNode().querySelector(".notepadreplace").style.display ="block";
        this.querySelector(".bar2").style.display ="none";
        a.stopPropagation();
      };
    }
  
    #html = `
    <ul class="menu">
          <li class="table1">
              文件(F)
              <ul class="bar">
                  <li class="blue">新建(N)<span>Ctrl+N</span></li>
                  <li class="blue">打开(O)<span>Ctrl+O</span></li>
                  <li class="blue">保存(S)<span>Ctrl+S</span></li>
                  <li class="blue">另存为(A)...</li>
                  <div class="hr"></div>
                  <li class="blue">页面设置(U)...</li>
                  <li class="blue">打印(P)</li>
                  <div class="hr"></div>
                  <li class="blue">退出(X)</li>
              </ul>
          </li>
          <li class="table2">
              编辑(E)
              <ul class="bar2">
                  <li class="grey">撤销(U)<span>Ctrl+Z</span></li>
                  <div class="hr"></div>
                  <li class="blue">剪切(T)<span>Ctrl+X</span></li>
                  <li class="grey">复制(C)<span>Ctrl+C</span></li>
                  <li class="grey">粘贴(P)<span>Ctrl+V</li>
                  <li class="grey">删除(L)<span>Del</span></li>
                  <div class="hr"></div>
                  <li class="blue">使用Bing搜索<span>Ctrl+E</li>
                  <li class="grey">查找(F)...<span>Ctrl+F</span></li>
                  <li class="grey">查找下一个(N)<span>F3</span></li>
                  <li class="notepad-replace">替换(R)...<span>Ctrl+H</span></li>
                  <li class="blue">转到(G)...<span>Ctrl+G</span></li>
                  <div class="hr"></div>
                  <li class="blue">全选<span>Ctrl+A</span></li>
                  <li class="blue">时间/日期(D)<span>F5</span></li>
              </ul>
          </li>
          <li class="table3">
              格式(O)
              <ul class="bar">
                  <li class="blue">自动换行(w)</li>
                  <li class="blue">字体(F)...</li>
              </ul>
          </li>
          <li class="table4">
              查看(V)
              <ul class="bar">
                  <li class="blue">状态栏(S)</li>
              </ul>
          </li>
          <li class="table5">
              帮助(H)
              <ul class="bar1">
                  <li class="blue">查看帮助(H)</li>
                  <li class="notepad-help">关于记事本(A)</li>
              </ul>
          </li>
      </ul>
    `;
  }
  customElements.define("notepad-menu", NotepadMenu);
  